import React from 'react';

const Kpi: React.FC = () => {
  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-800">KPI管理</h1>
        <p className="text-gray-600 mt-2">关键绩效指标设置与管理</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {/* KPI统计卡片 */}
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">KPI总数</p>
              <p className="text-2xl font-bold text-gray-800">24</p>
            </div>
            <div className="p-3 bg-blue-100 rounded-full">
              <i className="fa fa-bullseye text-blue-600 text-xl"></i>
            </div>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">完成率</p>
              <p className="text-2xl font-bold text-green-600">85%</p>
            </div>
            <div className="p-3 bg-green-100 rounded-full">
              <i className="fa fa-check-circle text-green-600 text-xl"></i>
            </div>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">待处理</p>
              <p className="text-2xl font-bold text-orange-600">3</p>
            </div>
            <div className="p-3 bg-orange-100 rounded-full">
              <i className="fa fa-clock text-orange-600 text-xl"></i>
            </div>
          </div>
        </div>
      </div>
      
      {/* KPI列表 */}
      <div className="mt-8 bg-white rounded-lg shadow">
        <div className="p-6 border-b">
          <h2 className="text-lg font-semibold text-gray-800">KPI列表</h2>
        </div>
        <div className="p-6">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50">
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">KPI名称</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">权重</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">目标值</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">当前值</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">完成率</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">状态</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200">
                <tr>
                  <td className="px-4 py-3 text-sm text-gray-800">代码质量评分</td>
                  <td className="px-4 py-3 text-sm text-gray-600">20%</td>
                  <td className="px-4 py-3 text-sm text-gray-600">90</td>
                  <td className="px-4 py-3 text-sm text-gray-600">88</td>
                  <td className="px-4 py-3 text-sm text-green-600">97.8%</td>
                  <td className="px-4 py-3">
                    <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">进行中</span>
                  </td>
                </tr>
                <tr>
                  <td className="px-4 py-3 text-sm text-gray-800">项目交付准时率</td>
                  <td className="px-4 py-3 text-sm text-gray-600">25%</td>
                  <td className="px-4 py-3 text-sm text-gray-600">95%</td>
                  <td className="px-4 py-3 text-sm text-gray-600">92%</td>
                  <td className="px-4 py-3 text-sm text-green-600">96.8%</td>
                  <td className="px-4 py-3">
                    <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">进行中</span>
                  </td>
                </tr>
                <tr>
                  <td className="px-4 py-3 text-sm text-gray-800">客户满意度</td>
                  <td className="px-4 py-3 text-sm text-gray-600">15%</td>
                  <td className="px-4 py-3 text-sm text-gray-600">4.5</td>
                  <td className="px-4 py-3 text-sm text-gray-600">4.3</td>
                  <td className="px-4 py-3 text-sm text-orange-600">95.6%</td>
                  <td className="px-4 py-3">
                    <span className="px-2 py-1 text-xs bg-orange-100 text-orange-800 rounded-full">待改进</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Kpi;